import React, { useContext, useState } from 'react';
import { Button, Tooltip } from 'antd';

import {
  SaveOutlined,
  ZoomOutOutlined,
  UndoOutlined,
  RedoOutlined,
  DeleteOutlined,
  ZoomInOutlined,
  FullscreenExitOutlined,
  FullscreenOutlined,
  BlockOutlined,
  SnippetsOutlined,
} from '@ant-design/icons';

import cls from 'classnames';
// import './index.less';

import styles from './index.less';
import { CanvasDomIDContex, DesignerContext } from '../DesignerHooks';
import MyIcon from '@/components/MyIcon';
interface IPropsType {
  // onOpenUpdateDrawer: any
  // record: any
  // updateCallback: any
  // onOpenOgDrawer: any
  // planBtn: any
  // event: any
}

export const DesignerHeader: React.FC<IPropsType> = (
  {
    // event,
  },
) => {
  const context = useContext(DesignerContext);

  const { canvasDomID } = useContext(CanvasDomIDContex);

  const [fullScreen, setFullScreen] = useState(false);

  // 全屏
  const onOpenScreen = () => {
    const element: any = document.getElementById(canvasDomID);
    if (element?.requestFullscreen) {
      element.requestFullscreen();
    } else if (element?.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element?.webkitRequestFullScreen) {
      element.style.cssText =
        'object-fit: contain;position: fixed !important;top: 0px !important;right: 0px !important;bottom: 0px !important;left: 0px !important;box-sizing: border-box !important;min-width: 0px !important;max-width: none !important;min-height: 0px !important;max-height: none !important;width: 100% !important;height: 100% !important;transform: none !important;margin: 0px !important;';
      element.webkitRequestFullScreen();
    }
    setFullScreen(true);
  };

  // 退出全屏
  const onCloseScreen = () => {
    const fullscreenElement =
      document.fullscreenElement ||
      (document as any)?.mozFullScreenElement ||
      (document as any)?.webkitFullscreenElement;
    if (document?.exitFullscreen) {
      if (fullscreenElement) {
        document.exitFullscreen();
      }
    } else if ((document as any)?.mozCancelFullScreen) {
      (document as any).mozCancelFullScreen();
    } else if ((document as any)?.webkitCancelFullScreen) {
      let element: any = document.getElementById(canvasDomID);
      element.style.cssText = '';
      (document as any).webkitCancelFullScreen();
    } else if ((document as any)?.msExitFullscreen) {
      (document as any).msExitFullscreen();
    }
    setFullScreen(false);
  };

  // 处理精度丢失,四舍五入保留两位小数
  const handleToFixed = (num: number, many: number) => {
    let str = ''; //字符串累加
    str = (Math.round(num * 100) / 100).toFixed(many).toString();
    return str; //字符串=>数组=>反转=>字符串
  };

  return (
    <div className={cls(styles['ivr-header-body'])}>
      {/* <Row gutter={[10, 10]}>
        <Col>
          <Button
            type={'default'}
            size={'small'}
            icon={<ExportOutlined/>}
          >
            导出
          </Button>
        </Col>
        <Col>
          <Button
            type={'default'}
            size={'small'}
            icon={<PlayCircleOutlined/>}
          >
            运行
          </Button>
        </Col>
        <Col>
          <Button
            type={'primary'}
            size={'small'}
            icon={<SaveOutlined/>}
          >
            保存
          </Button>
        </Col>
      </Row> */}

      <div
        style={{ borderRight: '1px dashed #9e9e9e' }}
        // className={context?.canvas?.activeLayer?.data?.pens?.length > 0 ? styles['ivr-optionBtnCopy'] : styles['ivr-optionBtn']}
      >
        <Tooltip
          title="保存"
          getPopupContainer={() => document.getElementById(canvasDomID) as any}
          placement="bottom"
        >
          <Button
            // type={'primary'}
            icon={<SaveOutlined />}
            // loading={saveLoading}
            onClick={() => {
              // onSave()
            }}
            style={{
              marginRight: 16,
              // marginLeft: fullScreen ? '16px' : 0
            }}
            type={
              context?.canvas?.activeLayer?.data?.pens?.length > 0
                ? 'primary'
                : 'default'
            }
            // disabled={context?.canvas?.activeLayer?.data?.pens?.length > 0 ? false : true}
          />
        </Tooltip>
      </div>
      <div>
        <Tooltip
          title={fullScreen ? '退出全屏' : '全屏'}
          getPopupContainer={() => document.getElementById(canvasDomID) as any}
          placement="bottom"
        >
          <Button
            icon={
              fullScreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />
            }
            style={{ margin: '0px 16px' }}
            onClick={() => {
              if (fullScreen) {
                onCloseScreen();
              } else {
                onOpenScreen();
              }
            }}
            type={'primary'}
          />
        </Tooltip>

        <Tooltip
          title="上一步"
          getPopupContainer={() => document.getElementById(canvasDomID) as any}
          placement="bottom"
        >
          <Button
            icon={<UndoOutlined />}
            style={{ marginRight: '16px' }}
            onClick={() => {
              // planBtn('undo')
              context?.undo();
            }}
          />
        </Tooltip>

        <Tooltip
          title="下一步"
          getPopupContainer={() => document.getElementById(canvasDomID) as any}
          placement="bottom"
        >
          <Button
            icon={<RedoOutlined />}
            style={{ marginRight: '16px' }}
            onClick={() => {
              // planBtn('redo')
              context?.redo();
            }}
          />
        </Tooltip>

        <Tooltip
          title="删除"
          getPopupContainer={() => document.getElementById(canvasDomID) as any}
          placement="bottom"
        >
          <Button
            icon={<DeleteOutlined />}
            style={{ marginRight: '16px' }}
            onClick={() => {
              // planBtn('delete')
              // context?.delete();
            }}
            type={context?.targetNode?.isDelete ? 'primary' : 'default'}
            disabled={context?.targetNode?.isDelete ? false : true}
          />
        </Tooltip>

        <Tooltip
          title="全部复制"
          getPopupContainer={() => document.getElementById(canvasDomID) as any}
          placement="bottom"
        >
          <Button
            icon={<BlockOutlined />}
            style={{ marginRight: '16px' }}
            type={
              context?.canvas?.activeLayer?.data?.pens?.length > 0
                ? 'primary'
                : 'default'
            }
            onClick={() => {
              // context?.dispatch({
              //   type: 'event/copyData',
              //   payload: JSON.stringify(context?.canvas?.data),
              //   callback: (res:any) => {
              //     if (res) {
              //       message.success('全部复制成功！')
              //     } else {
              //       message.error('全部复制失败！')
              //     }
              //   }
              // })
            }}
            disabled={
              context?.canvas?.activeLayer?.data?.pens?.length > 0
                ? false
                : true
            }
          />
        </Tooltip>

        <Tooltip
          title="全部粘贴"
          getPopupContainer={() => document.getElementById(canvasDomID) as any}
          placement="bottom"
        >
          <Button
            icon={<SnippetsOutlined />}
            style={{ marginRight: '16px' }}
            onClick={() => {
              // planBtn('snippets')
            }}
            // disabled={event?.copyPlanGraph ? false : true}
          />
        </Tooltip>

        <Tooltip
          title={
            <>
              放大&nbsp;&nbsp;&nbsp;&nbsp;
              <span style={{ fontSize: 16, color: '#1df9fc' }}>
                {parseInt(`${handleToFixed(Number(context?.scale) * 100, 0)}`)}{' '}
                %
              </span>
            </>
          }
          getPopupContainer={() => document.getElementById(canvasDomID) as any}
          placement="bottom"
        >
          <Button
            icon={<ZoomInOutlined />}
            style={{ marginRight: '16px' }}
            type={
              Number(context?.scale) < 3 &&
              context?.canvas?.activeLayer?.data?.pens?.length > 0
                ? 'primary'
                : 'default'
            }
            onClick={() => {
              context?.scaleTo('in');
            }}
            disabled={
              Number(context?.scale) < 3 &&
              context?.canvas?.activeLayer?.data?.pens?.length > 0
                ? false
                : true
            }
          />
        </Tooltip>

        <Tooltip
          title={
            <>
              缩小&nbsp;&nbsp;&nbsp;&nbsp;
              <span style={{ fontSize: 16, color: '#1df9fc' }}>
                {parseInt(`${handleToFixed(Number(context?.scale) * 100, 0)}`)}{' '}
                %
              </span>
            </>
          }
          getPopupContainer={() => document.getElementById(canvasDomID) as any}
          placement="bottom"
        >
          <Button
            icon={<ZoomOutOutlined />}
            style={{ marginRight: '16px' }}
            type={
              Number(context?.scale) > 0.4 &&
              context?.canvas?.activeLayer?.data?.pens?.length > 0
                ? 'primary'
                : 'default'
            }
            onClick={() => {
              context?.scaleTo('out');
            }}
            disabled={
              Number(context?.scale) > 0.4 &&
              context?.canvas?.activeLayer?.data?.pens?.length > 0
                ? false
                : true
            }
          />
        </Tooltip>

        <Tooltip
          title={
            <>
              重置大小&nbsp;&nbsp;&nbsp;&nbsp;
              <span style={{ fontSize: 16, color: '#1df9fc' }}>
                {parseInt(`${handleToFixed(Number(context?.scale) * 100, 0)}`)}{' '}
                %
              </span>
            </>
          }
          getPopupContainer={() => document.getElementById(canvasDomID) as any}
          placement="bottom"
        >
          <Button
            icon={<MyIcon type="icon-zoom-fit" style={{ fontSize: 18 }} />}
            onClick={() => {
              context?.scaleTo('reset');
            }}
            type={
              Number(context?.scale) != 1 &&
              context?.canvas?.activeLayer?.data?.pens?.length > 0
                ? 'primary'
                : 'default'
            }
            disabled={
              Number(context?.scale) != 1 &&
              context?.canvas?.activeLayer?.data?.pens?.length > 0
                ? false
                : true
            }
          />
        </Tooltip>
      </div>
    </div>
  );
};
